import React, {
  useEffect,
  useState,
  useRef,
  useReducer,
  useCallback,
} from 'react';
import {
  View,
  Text,
  TextInput,
  Image,
  TouchableWithoutFeedback,
  Keyboard,
  KeyboardAvoidingView
} from 'react-native';
import {
  ModalCreateGroup,
  FlatListTm,
  TitleBar,
  ModalSelectSticker,
} from '../components';
import StickerDataSQL from '../db';
import { DB_ST } from '../utils/DBFields';
import NativeFileUtils from 'rtn-supernote-plugin-core/src/module/NativeFileUtils';
import { renameFunGroup, renameSticker, saveSticker, stickerGroupAdd } from '../utils/StickerUtils';
import NativeEvent from 'rtn-supernote-plugin-core/src/module/NativeEvent';
import i18n from '../i18n';
import { findNextAutoCreateStickerName, findNextEm, RegExpArr } from '../utils/jsUtils';
import stylesXS from '../styles/xs';
import stylesMD from '../styles/md';
import stylesLG from '../styles/lg';
import dimesA5 from '../styles/size/a5';
import dimesA5X2 from '../styles/size/a5x2';
import dimesA6 from '../styles/size/nom';

const SMALL_KEYBOARD_HEIGHT = 200;
// A5X设置的键盘高度
const A5X_KEYBOARD_HEIGHT = 200;
// 用来判断是否是蓝牙键盘， 键盘的最小高度
const KEYBOARD_MIN_HEIGHT = 300;

// 键盘横屏固定高度
const KEYBOARD_HEIGHT_LAND = 434;
const KEYBOARD_HEIGHT_LAND_MAX = 528;
// 蓝牙键盘高度
const KEYBOARD_HEIGHT_BLUE = 73;


const StickerCreatePage = ({
  appState,
  rotation,
  changeEvent,
  screenWidth,
  screenHeight,
}) => {
  console.log('StickerCreatePage rotation:' + rotation);
  const [stickerName, setStickerName] = useState('');
  // 上一次使用的默认名字
  const [lastDefaultstickerName, setLastDefaultstickerName] = useState('');
  const [stickerGroupName, setStickerGroupName] = useState('');
  const [stickerGroups, setStickerGroups] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalStickerVisible, setModalStickerVisible] = useState(false);
  const [stickerGroup, setStickerGroup] = useState(null);
  // 记录上一次选中的贴纸库，在创建贴纸库取消时需要用到
  const [lastStickerGroup, setLastStickerGroup] = useState(null);
  const [modalMessage, setModalMessage] = useState(null);
  const [modalUseStatus, setModalUseStatus] = useState(null);
  const [modalTitle, setModalTitle] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  // 设置键盘高度
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  const [isCreating, setCreating] = useState(false);

  const textInputRef = useRef(null);

  const [isStickerInputFocused, setStickerInputFocused] = useState(false);

  // 贴纸名是否输入特殊字符
  const [isInputStickerSpecial, setIsInputStickerSpecial] = useState(false);
  // 贴纸库名是否输入特殊字符
  const [isInputStickerGroupSpecial, setIsInputStickerGroupSpecial] = useState(false);

  useEffect(() => {
    setIsLoading(true);
  }, [rotation]);
  useEffect(() => {
    if (isLoading) {
      setTimeout(() => {
        setIsLoading(false);
      }, 300);
    }
  }, [isLoading]);
  useEffect(() => {
    NativeEvent.setLassoBoxSate(2);
    _getStickerGroupList();
  }, []);
  let wd = Math.round(screenWidth);

  const isSmall = wd === 1024 || wd === 1365 || wd === 994 || wd === 1325
    ? false : true;
  const keyBehavior = wd === 1024 || wd === 1365
    ? "padding" : "none";
  const isA5X2 = wd === 1024 || wd === 1365;
  const isA5X = wd === 994 || wd === 1325;
  console.log("StickerCreatePage isSmall:" + isSmall + "==" + keyBehavior + "==" + wd);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      (e) => {
        console.log("keyboardDidShow", e.endCoordinates.height);


        if ((rotation == 1 || rotation == 3) && !isA5X2) {
          const currentKeyHeight = Math.floor(e.endCoordinates.height);
          console.log("keyboardDidShow currentKeyHeight", currentKeyHeight);
          // KEYBOARD_HEIGHT_LAND是虚拟软键盘横屏状态下的固定高度，
          // 1.当前键盘高度小于KEYBOARD_MIN_HEIGHT说明是蓝牙键盘，键盘高度设置为0
          // 2.当前键盘高度大于KEYBOARD_HEIGHT_LAND，说明再蓝牙键盘关闭状态中，也要设置为0，否则界面显示会异常
          if (currentKeyHeight < KEYBOARD_MIN_HEIGHT
            /*  || (currentKeyHeight > KEYBOARD_HEIGHT_LAND && currentKeyHeight < KEYBOARD_HEIGHT_LAND_MAX) */
          ) {
            console.log("keyboardDidShow set 0");

            setKeyboardHeight(0);

          } else {
            setKeyboardHeight(isSmall ? SMALL_KEYBOARD_HEIGHT : A5X_KEYBOARD_HEIGHT);
          }

        }

      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        console.log("keyboardDidHide");
        if ((rotation == 1 || rotation == 3) && !isA5X2) {
          setKeyboardHeight(0);
        }

      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };

  }, [rotation]);

  const styles =
    wd === 1024 || wd === 1365
      ? stylesLG
      : wd === 994 || wd === 1325
        ? stylesMD
        : stylesXS;
  const nom = wd === 1024 || wd === 1365
    ? dimesA5X2
    : wd === 994 || wd === 1325
      ? dimesA5
      : dimesA6;

  const itemMarginRight = screenWidth < screenHeight ?
    Math.floor((screenWidth - nom.dp_px_80 * 2 - 4 * styles.modalIteSty.width) / 3)
    : Math.floor((screenWidth - nom.dp_px_80 * 2 - 6 * styles.modalIteSty.width) / 5);


  /// 生成自动贴纸名
  const _findAutoSticierName = async (
    stickerGroup,// 当前贴纸库
  ) => {
    // 查询当前贴纸库所有贴纸文件
    const { code, data } = await StickerDataSQL.db_fun(
      DB_ST.SELECT_STICKER_GROUP_ID_ST,
      [stickerGroup?.id],
    );
    console.log("_findAutoSticierName", data);
    return findNextAutoCreateStickerName(data, stickerGroup?.name, item => item.name);

  }

  // 获取最近使用时间，最近使用是用来排序的，
  // 如果用户改了时间，当前时间可能比数据库中的时间小，需要重新设置
  const _getUpdateTime = () => {
    const currentTime = Date.now();
    if (stickerGroups?.length > 1) {
      console.log("_getUpdateTime currentTime:" + currentTime + "==" + stickerGroups[1]?.update_time);
      if (stickerGroups[1]?.update_time && currentTime < stickerGroups[1]?.update_time) {
        return stickerGroups[1]?.update_time + 100;
      }
    }

    return currentTime;

  }
  /*
   * 查询全部的贴纸库
   * */
  const _getStickerGroupList = async () => {
    try {
      const { data } = await StickerDataSQL.db_fun(
        DB_ST.SELECT_STICKER_GROUP_UPDATE_ST,
        [],
      );
      console.log('setStickerGroupsetStickerGroup', data);
      setStickerGroups([
        { id: 'new_create_group', name: i18n.t('btn.addColl'), update_time: Number.MAX_VALUE },
        ...data,
      ]);
      if (data?.length > 0) {
        // const res = await renameSticker(
        //   data[0]?.name + '_sticker',
        //   DB_ST.SELECT_STICKER_LIKE_ST_BY_GROUP_ID,
        //   data[0].id
        // );
        const res = await _findAutoSticierName(data[0]);

        console.log(res, 'resresresresres');
        if (checkLastStickName()) {
          setStickerName(res);
        }
        setLastDefaultstickerName(res);
        setStickerGroup(data[0]);
      } else {
        let defaultName = i18n.t('placeholder.newColl') + '_sticker'
        setStickerName(defaultName);
        setLastDefaultstickerName(defaultName);
        console.log("_getStickerGroupList defaultName:", defaultName);
        setStickerGroup({
          id: 'new_create_group',
          name: i18n.t('btn.addColl'),
          update_time: Number.MAX_VALUE ,
        });
      }
    } catch (error) {
      console.error('Error fetching sticker groups:', error);
    }
  };
  /*
   *添加贴纸库
   * */
  const _stickerGroupAdd = async groupName => {
    const { code, data } = await stickerGroupAdd(
      groupName.replace(/\s*$/, ''),
      null,
      _getUpdateTime()
    );
    console.log(data, 'addDataaddDataaddDataaddData');
    if (code === 200) {
      const makeDir = await NativeFileUtils.makeDir(data?.path);
      console.log(makeDir, 'makeDirmakeThDir');
      setStickerGroup({
        name: groupName,
        path: data?.path,
        thumb_sticker: '',
        id: data?.id,
      });
      setTimeout(async () => {
        setModalVisible(false);
        setModalTitle('');
        setModalMessage('');
        setStickerGroupName('');
        // let name = await renameSticker(
        //   data.name + '_sticker',
        //   DB_ST.SELECT_STICKER_LIKE_ST_BY_GROUP_ID,
        //   data.id
        // );
        let name = await _findAutoSticierName(data);
        console.log("_stickerGroupAdd StickerName:" + name);
        if (checkLastStickName()) {
          setStickerName(name);
        }
        setLastDefaultstickerName(name);
        const res = await StickerDataSQL.db_fun(
          DB_ST.SELECT_STICKER_GROUP_UPDATE_ST,
          [],
        );
        if (
          res?.data?.filter(item => item?.id !== 'new_create_group')?.length < 1
        ) {
          await _saveSticker(data);
        } else {
          await _getStickerGroupList(data?.id);
          return {
            name: groupName,
            path: data?.path,
            thumb_sticker: '',
            id: data?.id,
          };
        }
      }, 100);
    }
  };
  const _saveSticker = async (data = null) => {
    try {
      const re = await StickerDataSQL.db_fun(DB_ST.SELECT_STICKER_GROUP_ID_ST, [
        data?.id,
      ]);
      console.log("_saveSticker re?.data?.length:" + re?.data?.length);
      if (re?.data?.length > 199) {
        setModalVisible(true);
        setModalUseStatus(7);
        setModalMessage(i18n.t('msg.newStErr'));
        setModalTitle(i18n.t('title.newStErr'));
      } else {
        setCreating(true);
        const res = await saveSticker(
          data || stickerGroup,
          await renameSticker(stickerName.trim(), DB_ST.SELECT_STICKER_LIKE_ST_BY_GROUP_ID, data?.id),
        );
        console.log(res, '_saveSticker');
        if (res) {
          setStickerName('');
          setLastDefaultstickerName('');
          await StickerDataSQL.db_fun(DB_ST.UPDATE_GROUP_STICKER_UPDATE_ST, [
            Date.now(),
            stickerGroup?.id,
          ]);
          await _getStickerGroupList();
          NativeEvent.setLassoBoxSate(2);
          changeEvent();
          await NativeEvent.onStop();
          setIsLoading(true);
        }
        setCreating(false);
      }
    } catch (e) {
      console.log(e);
    }
  };

  const _onItemPress = async item => {
    // 上一个贴纸库数据
    var lastGroup = lastStickerGroup;
    setLastStickerGroup(stickerGroup);
    if (item.id === 'new_create_group') {
      if (stickerGroups?.length > 49) {
        setModalUseStatus(7);
        setModalMessage(i18n.t('msg.newCollErr'));
        setModalTitle(i18n.t('title.newCollErr'));
        setModalVisible(true);
        return;
      }
      let groupName = await renameFunGroup(
        i18n.t('placeholder.newColl'),
        DB_ST.SELECT_STICKER_GROUP_LIKE_ST,
      );
      console.log("sticker group add name:" + groupName);
      setStickerGroupName(groupName);
      setModalMessage(i18n.t('placeholder.group'));
      setModalTitle(i18n.t('title.newColl'));
      setModalVisible(true);
      setStickerGroup(item);
      focusTextInput();
    } else {
      const { code, data } = await StickerDataSQL.db_fun(
        DB_ST.SELECT_STICKER_GROUP_ID_ST,
        [item?.id],
      );
      const res = await StickerDataSQL.db_fun(DB_ST.UPDATE_GROUP_STICKER_UPDATE_ST, [
        Date.now(),
        item?.id,
      ]);
      if (res?.code === 200) {
        _getStickerGroupList();
      }

        setStickerGroup(item);
        let defaultName = findNextAutoCreateStickerName(data, item?.name, item => item.name)
        if (checkLastStickName()) {
          setStickerName(defaultName);

        }
        setLastDefaultstickerName(defaultName);
      
    }
  };

  // 切换贴纸库的时候，核对上一个贴纸库名称是否使用的默认名称
  const checkLastStickName = () => {
    console.log("checkLastStickName", stickerName, lastDefaultstickerName, !stickerName?.trim(),
      !lastDefaultstickerName?.trim());
    return !stickerName?.trim() || !lastDefaultstickerName?.trim()
      || stickerName === lastDefaultstickerName;

  }

  const focusTextInput = useCallback(() => {
    if (textInputRef.current) {
      setTimeout(() => {
        textInputRef?.current?.focus();
        textInputRef.current.setNativeProps({
          selection: {
            start: stickerGroupName?.length,
            end: stickerGroupName?.length,
          },
        });
      }, 200); // 根据需要调整延迟时间
    }
  }, [stickerGroupName]);

  return (
    <>
      <TouchableWithoutFeedback
        onPress={() => {
          Keyboard.dismiss();
        }}>
        <View style={styles.container}>
          <TitleBar
            backgroundColor={'#000'}
            textColor={'#fff'}
            textRightColor={'#999'}
            leftBtnText={i18n.t('btn.cancel')}
            onBack={async () => {
              NativeEvent.setLassoBoxSate(2);
              changeEvent();
              await NativeEvent.onStop();
              setIsLoading(true);
            }}
            title={isCreating ? i18n.t('msg.creating') : i18n.t('title.newSt')}
            rightBtnText={i18n.t('btn.create')}
            status={'create'}
            rightBtnStatus={true}
            screenWidth={screenWidth}
            screenHeight={screenHeight}
            rightValueBtn={stickerName && stickerName.trim() ? true : false}
            onRight={async () => {
              if (
                stickerGroups?.filter(item => item?.id !== 'new_create_group')
                  ?.length < 1
              ) {
                console.log(stickerName, 'stickerGroupstickerGroup', lastDefaultstickerName);
                await _stickerGroupAdd(i18n.t('placeholder.newColl'));
              } else {
                await _saveSticker(stickerGroup);
              }
              Keyboard.dismiss();
            }}
            sWidth={{ width: screenWidth }}
          />
          <View
            style={[
              screenWidth > screenHeight
                ? styles.contentBodyVertical
                : styles.contentBodyLand,
              styles.padding_48,
              {
                width: screenWidth,
              },
            ]}>
            <View
              style={[
                styles.bottomBorder,
                styles.height_200,

              ]}>
              <Text
                style={[
                  styles.fontSize_34,
                  styles.marginBottom_20,
                  {
                    color: '#000',
                    fontWeight: '700',
                  },
                ]}>
                {i18n.t('btn.name')}
              </Text>
              <View>
                <TextInput
                  style={[
                    styles.searchInput,
                    styles.borderWidth,
                    styles.paddingRl_20_100,
                    {
                      fontWeight: '400',
                      color: '#000',
                    },
                  ]}
                  selectTextOnFocus={false}
                  contextMenuHidden={true}
                  caretHidden={true}
                  editable={true}
                  // maxLength={150}
                  placeholder={i18n.t('placeholder.sticker')}
                  multiline={false}
                  numberOfLines={1}
                  onChangeText={e => {
                    const pattern = RegExpArr.special;
                    var matchTxt = e.match(pattern);
                    if (matchTxt) {
                      e = e.replace(matchTxt[0], '');
                      setIsInputStickerSpecial(true);
                      setTimeout(() => {
                        setIsInputStickerSpecial(false);
                      }, 3000);
                    }
                    setStickerName(e);
                  }}
                  value={stickerName}
                  onFocus={() => setStickerInputFocused(true)}
                  onBlur={() => {
                    Keyboard.dismiss();
                    setStickerInputFocused(false);
                  }}
                />
                {isInputStickerSpecial ? (
                  <View
                    style={[
                      styles.modalTextInputCard,
                      {
                        position: 'absolute',
                        marginStart: 0,
                        marginTop: 0,
                        width: '100%',
                        height: '100%',
                      }
                    ]}
                  >
                    <Text
                      style={[
                        styles.modalTextInputCard,
                        styles.fontSize_34,
                        styles.paddingRl_20_20,
                        {
                          position: 'absolute',
                          marginStart: 0,
                          marginTop: 0,
                          width: '100%',
                          height: '100%',
                          fontWeight: '400',
                          color: '#fff',
                          backgroundColor: 'black',
                          textAlignVertical: 'center',
                        }

                      ]}
                    >{i18n.t('msg.specialToast')}</Text>
                  </View>
                )
                  : null}
              </View>
              {stickerName && isStickerInputFocused ? (
                <TouchableWithoutFeedback
                  onPress={() => {
                    setStickerName('');
                  }}>
                  <Image
                    style={styles.createClose}
                    source={require('../../assets/ic_close.png')}
                  />
                </TouchableWithoutFeedback>
              ) : null}
            </View>
            <View style={[styles.flexCenterSpace, styles.marginTop_48]}>
              <Text
                style={[
                  styles.fontSize_34,
                  {
                    fontWeight: '700',
                    color: '#000',
                  },
                ]}>
                {i18n.t('title.coll')}
              </Text>
              {stickerGroups?.length > 8 ? (
                <TouchableWithoutFeedback
                  onPress={() => setModalStickerVisible(true)}>
                  <View style={styles.flexCenter}>
                    <Text
                      style={[
                        styles.fontSize_26,
                        styles.marginRight12,
                        {
                          fontWeight: '700',
                        },
                      ]}>
                      {i18n.t('btn.viewAll')}
                    </Text>
                    <Image
                      style={styles.imgWdHt}
                      source={require('../../assets/ic_arrow_right.png')}
                    />
                  </View>
                </TouchableWithoutFeedback>
              ) : null}
            </View>
            <FlatListTm
              list={
                screenWidth > screenHeight
                  ? stickerGroups.slice(0, 12)
                  : stickerGroups.slice(0, 8)
              }
              onItemPress={item => _onItemPress(item)}
              screenWidth={screenWidth}
              screenHeight={screenHeight}
              bodyStyle={[
                {
                  paddingHorizontal: nom.dp_px_32,
                  width: screenWidth - nom.dp_px_48 * 2,
                  marginTop: nom.dp_px_40

                },
              ]}
              checkId={stickerGroup}
              itemStyle={[
                styles.modalIteSty,
                {
                  marginRight: itemMarginRight,
                  marginBottom: nom.dp_px_80

                }
              ]}
              status={'create'}
            />
          </View>
          {/* 作为更多的底色，解决横竖屏切换出现创建贴纸界面的问题 */}
          {modalStickerVisible ? (
            <View
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: screenWidth,
                height: screenHeight,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: 'white'
              }}></View>
          ) : null}


          <ModalSelectSticker
            modalVisible={modalStickerVisible}
            data={stickerGroups?.filter(item => item?.id !== 'new_create_group')}
            screenWidth={screenWidth}
            screenHeight={screenHeight}
            onClose={() => {
              setModalStickerVisible(false);
            }}
            checkId={stickerGroup}
            onConfirm={async item => {
              var newUpdateTime = _getUpdateTime();
              item.update_time = newUpdateTime;
              stickerGroups.sort((a, b) => b.update_time - a.update_time);
              setStickerGroup(item);

              setModalStickerVisible(false);
              const { code, data } = await StickerDataSQL.db_fun(
                DB_ST.SELECT_STICKER_GROUP_ID_ST,
                [item?.id],
              );
              console.log("StickerCreatePage select data", data);
              // _onItemPress(item);
              const res = await StickerDataSQL.db_fun(
                DB_ST.UPDATE_GROUP_STICKER_UPDATE_ST,
                [newUpdateTime, item?.id],
              );
              console.log("StickerCreatePage update data", res.data);
              if (res?.code === 200) {
                // _getStickerGroupList();
              }
              console.log("StickerCreatePage onConfirm item", item);
              
              let defaultName = findNextAutoCreateStickerName(data, item?.name, item => item.name);
              if (checkLastStickName()) {
                setStickerName(defaultName);
              }
              setLastDefaultstickerName(defaultName);
            }}
          />
          {modalVisible ? (
            <View
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: screenWidth,
                height: screenHeight,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                <View
                  style={[
                    styles.modalBg,
                    {
                      opacity: 0,
                      width: screenWidth,
                      height: screenHeight,
                    },
                  ]}
                />
              </TouchableWithoutFeedback>


                <View
                  style={[
                    styles.borderWidth,
                    styles.borderRadius_6,
                    styles.modalCardVertical,
                  {
                    backgroundColor: '#fff',
                    marginBottom: (rotation == 1 || rotation == 3)
                      ? null : (isSmall ? nom.dp_px_300 : null),
                    borderWidth: nom.dp_px_2 - nom.dp_px_1 / 2,
                    top: (rotation == 1 || rotation == 3) ? screenHeight / 5 : null,
                    position: (rotation == 1 || rotation == 3) ? 'absolute' : 'relative',

                  },
                  ]}>
                  <View
                    style={[
                      styles.modalCardTitle,
                      styles.bottomBorder,
                      styles.createNmHt,
                      {              
                        borderBottomWidth: nom.dp_px_1
                      }
                    ]}>
                    <Text style={[styles.modalCardTitleText, styles.fontSize_40]}>
                      {modalTitle}
                    </Text>
                  </View>
                  <View style={[styles.modalCardBody,
                  {
                    minHeight: nom.dp_px_210,
                  }
                  ]}>
                    {modalUseStatus === 7 ? (
                      <View style={{ 
                        alignSelf: 'flex-start',
                        marginHorizontal: nom.dp_px_64,
                        marginVertical: nom.dp_px_64,
                       }}>
                        <Text style={[styles.modalButtonText, styles.fontSize_34]}>
                          {modalMessage}
                        </Text>
                      </View>
                    ) : (
                      <View style={{ position: 'absolute' }}>
                        <View
                          style={[
                            styles.modalTextInputCard,
                            styles.borderWidth,
                            styles.inputCard,
                          ]}>
                          <TextInput
                            style={[
                              styles.modalTextInputCard,
                              styles.inputCard,
                              styles.fontSize_34,
                              styles.paddingRl_20_100,
                              {
                                fontWeight: '400',
                                color: '#000',
                              },
                            ]}
                            ref={textInputRef}
                            selectTextOnFocus={false}
                            contextMenuHidden={true}
                            caretHidden={true}
                            editable={true}
                            // maxLength={150}
                            placeholder={modalMessage}
                            multiline={false}
                            numberOfLines={1}
                            onChangeText={e => {
                              const pattern = RegExpArr.special;
                              var matchTxt = e.match(pattern);

                              if (matchTxt) {
                                console.log(
                                  'onChangeText matchTxt:' + JSON.stringify(matchTxt),
                                );
                                // 替换特殊字符
                                e = e.replace(matchTxt[0], '');
                                setIsInputStickerGroupSpecial(true);
                                setTimeout(() => {
                                  setIsInputStickerGroupSpecial(false);
                                }, 3000);
                              }
                              setStickerGroupName(e);
                            }}
                            onBlur={() => Keyboard.dismiss()}
                            value={stickerGroupName}
                          />
                          {stickerGroupName ? (
                            <TouchableWithoutFeedback
                              onPress={() => {
                                setStickerGroupName('');
                              }}>
                              <Image
                                style={[styles.checkBtnWH, styles.closeBtn_88]}
                                source={require('../../assets/ic_close.png')}
                              />
                            </TouchableWithoutFeedback>
                          ) : null}
                          {isInputStickerGroupSpecial ? (
                            <View
                              style={[
                                styles.modalTextInputCard,
                                styles.inputCard,
                                { position: 'absolute', marginStart: 0, marginTop: 0 },
                              ]}>
                              <Text
                                style={[
                                  styles.modalTextInputCard,
                                  styles.inputCard,
                                  styles.fontSize_34,
                                  styles.paddingRl_20_20,
                                  {
                                    fontWeight: '400',
                                    color: '#fff',
                                    backgroundColor: 'black',
                                    textAlignVertical: 'center',
                                  },
                                ]}>
                                {i18n.t('msg.specialToast')}
                              </Text>
                            </View>
                          ) : null}
                        </View>
                      </View>
                    )}
                  </View>
                  <View style={[styles.modalButtonCardStyle, styles.modalBtmCard,
                    {
                      borderTopWidth: nom.dp_px_1
                    }
                  ]}>
                    {
                      modalUseStatus === 7 ? null : (
                        <TouchableWithoutFeedback
                          onPress={() => {
                            setStickerGroupName('');
                            setModalVisible(false);
                            setModalMessage('');
                            setModalTitle('');
                            setModalUseStatus(null);
                            if (stickerGroups?.length > 1) {
                              console.log("dialog test ok:" + lastStickerGroup + "==" + stickerGroups[1]);
                              if (lastStickerGroup != null) {
                                setStickerGroup(lastStickerGroup);
                              } else {
                                setStickerGroup(stickerGroups[1]);
                              }

                            }
                          }}>
                          <View
                            style={[
                              styles.modalButtonStyle,
                              styles.modalCardBody,
                              styles.modalBoCard,
                              styles.borderWidth,
                              {
                                minWidth: nom.dp_px_198,
                                width: null,
                                paddingHorizontal: nom.dp_px_32,
                                borderWidth: nom.dp_px_2 - nom.dp_px_1 / 2,
                                overflow: 'visible'
                              }
                            ]}>
                            <Text
                              numberOfLines={1}
                              style={[styles.modalButtonText, styles.fontSize_34,
                              {
                                textAlign: 'center',
                                flexShrink: 0
                              }
                              ]}>
                              {i18n.t('btn.cancel')}
                            </Text>
                          </View>
                        </TouchableWithoutFeedback>
                      )
                    }
                    <TouchableWithoutFeedback
                      onPress={async () => {
                        if (modalUseStatus === 7) {
                          setStickerGroupName('');
                          setModalVisible(false);
                          setModalMessage('');
                          setModalTitle('');
                          setModalUseStatus(null);
                          return;
                        }
                        if (!stickerGroupName || !stickerGroupName.trim()) {
                          return;
                        }
                        await _stickerGroupAdd(stickerGroupName.trim());
                      }}>
                      <View
                        style={[
                          styles.modalButtonStyle,
                          styles.modalCardBody,
                          styles.modalBoCard,
                          {
                            minWidth: nom.dp_px_198,
                            width: null,
                            paddingHorizontal: nom.dp_px_32,
                            backgroundColor: (stickerGroupName && stickerGroupName.trim())
                            || modalUseStatus === 7 ? '#000' : '#999',
                          },
                        ]}>
                        <Text
                          style={[
                            styles.fontSize_34,
                            {
                              fontWeight: '400',
                              color: '#fff',
                            },
                          ]}>
                          {modalUseStatus === 7 ? i18n.t('btn.ok') : i18n.t('btn.create')}
                        </Text>
                      </View>
                    </TouchableWithoutFeedback>
                   
                  </View>
                </View>


            </View>
          ) : null}

          {isCreating
            ? (<TouchableWithoutFeedback
              onPress={() => { }}>
              <View
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: '100%',
                  backgroundColor: 'transparent'
                }}
              /></TouchableWithoutFeedback>)
            : null}
          {isLoading ? (
            <View
              style={{
                width: '100%',
                height: '100%',
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: 9999,
                backgroundColor: '#ffffff',
              }}
            />
          ) : null}
        </View>

      </TouchableWithoutFeedback>
    </>
  );
};

export default StickerCreatePage;
